/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  Picker,
  TouchableOpacity,
  KeyboardAvoidingView,
  ScrollView,
  Keyboard,
  TouchableWithoutFeedback
} from 'react-native';
import styled from 'styled-components';
import LinearGradient from 'react-native-linear-gradient';
import { Actions } from 'react-native-router-flux';
import Textarea from 'react-native-textarea';
import Toast from 'antd-mobile-rn/lib/toast';
import { addEduTalk } from '../../../api/index';
import { getToken } from '../../../utils/auth';

export default class addTalk extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '添加教育谈话',
      imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
      petTalkEffect: '', //谈话评价
      petEmotionEvaluate: '', // 情绪评价
      petDangerEvaluate: '', // 危险评估
      petRemark: '', //综合评价
      token: ''
    };
  }

  componentDidMount() {
    console.log(JSON.stringify(this.props.info, null, 4));
    getToken().then(token => {
      this.setState({ token });
    });
  }

  render() {
    return (
      <KeyboardAvoidingView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <View style={styles.header}>
            <TouchableOpacity
              style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
              onPress={() => Actions.pop()}>
              <View>
                <Image
                  source={this.state.imgUrl}
                  style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
                />
              </View>
            </TouchableOpacity>
            <View
              style={{
                borderBottomColor: '#EDEDED',
                borderBottomWidth: 1,
                borderBottomStyle: 'dashed',
                paddingBottom: 10,
                flexDirection: 'row',
                justifyContent: 'space-between',
                position: 'relative',
                bottom: 0
              }}>
              <Text style={{ fontSize: 30, fontWeight: 'bold' }}>
                {this.state.title}
              </Text>
              <View>
                <TouchableOpacity
                  onPress={({ nativeEvent: e }) => {
                    console.log('show : ');
                  }}>
                  <Image
                    source={require('../../../assets/work/inform/moreHandle.png')}
                    style={{
                      width: 16.75,
                      height: 3.5,
                      marginTop: 18
                    }}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
          <ScrollView keyboardShouldPersistTaps="handled">
            <View
              style={{
                width: '100%',
                height: 50,
                backgroundColor: '#fff',
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingRight: 30,
                paddingLeft: 30,
                marginTop: 10,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 50 }}>
                谈话评价{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <Picker
                selectedValue={this.state.petTalkEffect}
                style={{ height: 50, width: 200 }}
                mode="dropdown"
                onValueChange={(itemValue, itemIndex) =>
                  this.setState({ petTalkEffect: itemValue })
                }>
                <Picker.Item label="请选择谈话评价" value="" />
                <Picker.Item label="较好" value="0" />
                <Picker.Item label="一般" value="1" />
                <Picker.Item label="差" value="2" />
              </Picker>
            </View>
            <View
              style={{
                width: '100%',
                height: 50,
                backgroundColor: '#fff',
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingRight: 30,
                paddingLeft: 30,
                marginTop: 10,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 50 }}>
                情绪评价{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <Picker
                selectedValue={this.state.petEmotionEvaluate}
                style={{ height: 50, width: 200 }}
                mode="dropdown"
                onValueChange={(itemValue, itemIndex) =>
                  this.setState({ petEmotionEvaluate: itemValue })
                }>
                <Picker.Item label="请选择情绪评价" value="" />
                <Picker.Item label="激动" value="0" />
                <Picker.Item label="可控" value="1" />
                <Picker.Item label="平稳" value="2" />
              </Picker>
            </View>
            <View
              style={{
                width: '100%',
                height: 50,
                backgroundColor: '#fff',
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingRight: 30,
                paddingLeft: 30,
                marginTop: 10,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 50 }}>
                危险评价{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <Picker
                selectedValue={this.state.petDangerEvaluate}
                style={{ height: 50, width: 200 }}
                placeholder="点击选择故障类型"
                mode="dropdown"
                onValueChange={(itemValue, itemIndex) =>
                  this.setState({ petDangerEvaluate: itemValue })
                }>
                <Picker.Item label="请选择危险评价" value="" />
                <Picker.Item label="低" value="0" />
                <Picker.Item label="中" value="1" />
                <Picker.Item label="高" value="2" />
              </Picker>
            </View>
            <View
              style={{
                width: '100%',
                backgroundColor: '#fff',
                paddingRight: 30,
                paddingLeft: 30,
                paddingTop: 15,
                paddingBottom: 15,
                marginBottom: 10
              }}>
              <Text style={{ width: '30%', textAlign: 'left', lineHeight: 40 }}>
                综合评价{' '}
                <Text style={{ color: 'red', marginLeft: 10 }}> * </Text>
              </Text>
              <TouchableWithoutFeedback
                onPress={Keyboard.dismiss} // 隐藏键盘
                accessible={false}>
                <View style={{ flex: 1 }}>
                  <Textarea
                    containerStyle={styles.textareaContainer}
                    style={styles.textarea}
                    onChangeText={t => {
                      console.log(t);
                      this.setState({ petRemark: t });
                    }}
                    defaultValue={this.state.petRemark}
                    maxLength={120}
                    placeholder={'请输入描述'}
                    placeholderTextColor={'#c7c7c7'}
                    underlineColorAndroid={'transparent'}
                  />
                </View>
              </TouchableWithoutFeedback>
            </View>
            <CustomLinearGradient
              colors={['#51B6FC', '#7666FE']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}>
              <OnTouchableOpacity
                style={{
                  width: '100%',
                  height: 40
                }}
                onPress={() => {
                  if (this.state.petTalkEffect === '') {
                    Toast.info('请选择谈话评价', 1, undefined, false);
                    return;
                  }
                  if (this.state.petEmotionEvaluate === '') {
                    Toast.info('请选择情绪评价', 1, undefined, false);
                    return;
                  }
                  if (this.state.petDangerEvaluate === '') {
                    Toast.info('请选择危险评价', 1, undefined, false);
                    return;
                  }
                  if (!this.state.petRemark) {
                    Toast.info('请选择综合评价', 1, undefined, false);
                    return;
                  }
                  addEduTalk(this.state.token, {
                    pfiFileName: this.props.info.pfiFileName,
                    pfiFilePath: this.props.info.pfiFilePath,
                    pfiFileType: 1,
                    pfiFileRemark: '',
                    petPrisonerId: this.props.info.petPrisonerId,
                    petTalkTime: this.props.info.petTalkTime,
                    petTalkTimeLong: this.props.info.petTalkTimeLong,
                    petTalkClassify: this.props.info.petTalkClassify,
                    petTalkType: this.props.info.petTalkType,
                    petTalkEffect: this.state.petTalkEffect,
                    petEmotionEvaluate: this.state.petEmotionEvaluate,
                    petDangerEvaluate: this.state.petDangerEvaluate,
                    petDangerAction: '',
                    petRemark: this.state.petRemark,
                    file: 'file://' + this.props.info.pfiFilePath
                  }).then(res => {
                    console.log(res);
                  });
                  console.log(1123);
                }}>
                <Text style={{ color: '#fff', fontSize: 12 }}>提交</Text>
              </OnTouchableOpacity>
            </CustomLinearGradient>
          </ScrollView>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 98,
    backgroundColor: '#FFFFFF',
    padding: 19.33
  },
  textareaContainer: {
    height: 180,
    padding: 5,
    backgroundColor: '#F5FCFF'
  },
  textarea: {
    textAlignVertical: 'top', // hack android
    height: 170,
    fontSize: 14,
    color: '#333'
  }
});
const OnTouchableOpacity = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;
const CustomLinearGradient = styled(LinearGradient)`
  margin-left: 20;
  margin-right: 20;
  margin-top: 18.67;
  margin-bottom: 18.67;
  border-radius: 19.55;
`;
// AppRegistry.registerComponent('ECharts', () => ECharts);
